<template>
  <div class="nav">
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <el-menu
      unique-opened
      router
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      width="150"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">成绩查询</span>
        </template>
        <div v-for="item in navList" :key="item.value">
          <el-menu-item :index="`/project/grade/${item.value}`">
            <i class="el-icon-reading"></i>{{ item.describe }}
          </el-menu-item>
        </div>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-s-promotion"></i>
          <span slot="title">练习中心</span>
        </template>
        <div v-for="item in navList" :key="item.value">
          <el-menu-item :index="`/project/practice/${item.value}`">
            <i class="el-icon-s-data"></i>{{ item.describe }}
          </el-menu-item>
        </div>
      </el-submenu>

        <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-message-solid"></i>
          <span slot="title">学习中心</span>
        </template>
        <div>
          <el-menu-item index="/study/english/13">
            <i class="el-icon-platform-eleme"></i>英语学习
          </el-menu-item>
        </div>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      navList: [],
    };
  },
  created() {
    this.navList = JSON.parse(sessionStorage.getItem("user")).user_grade_arr;
    // console.log(this.navList)
  },
  methods: {
    qh() {
      this.isCollapse = !this.isCollapse;
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
};
</script>

<style lang="less" scoped>
.nav {
  padding-top: 20px !important;
  padding-left: 10px !important;
}
.el-radio-group {
  height: 40px;
  align-items: center;
  display: flex;
  justify-content: center;
}

.el-input__inner,
.el-textarea__inner {
  background-color: rgba(0, 0, 0, 0.2) !important;
  color: #f5f5f5 !important;
}
</style>